<template>
  <div class="topic-container">
    <van-nav-bar
      title="68宠物"
      left-text=""
      left-arrow
      stick
      @click-left="onClickLeft"
    >
      <template #right>
      <van-icon 
        name="share-o" 
        size="18"
        @click="onClickRight"
        class="share-icon"
      />
    </template>
    </van-nav-bar>
         <van-cell class="seeking-card">
            <div class="seeking-text">
                {{ topicDetail.topicTitle }}
            </div>
            <div class="seeking-card-header">
                <div class="header-img">
                    <van-image round width="3rem" height="3rem" fit="cover" 
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
                </div>
                <div class="header-content">
                    <div>{{ topicDetail.topicAutorId }}</div>
                    <div><span>{{ dayjs().format('YYYY-MM-DD HH:mm')}} </span></div>
                </div>
            </div>

            <div class="meta-info">
      
      <!-- <br>
      <div>
        <span>{{ topicDetail.pageViews}}次浏览</span>
      </div> -->
    </div>
            
        </van-cell>
        <div 
        class="content" 
        
      >{{ topicDetail.topicContent }}</div>

      <div>{{ topicDetail.pageViews }}</div>

        <template v-if="seekComment == ''">
            <div class="noComment">
                <p>评论</p>
                <img src="../img/dog.png" alt="">
            </div>

        </template>

        <template v-else>
            <div class="commet-container">
                <p class="header"><span>评论</span> <span>&nbsp;&nbsp;({{1}})</span></p>
                <div class="comment">
                    <div class="header-img">
                        <van-image round width="3rem" height="3rem" fit="cover" 
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
                    </div>
                    <div class="comment-content">
                        <div style="color: #7f7f7f;font-weight: bold;">评论用户名</div>
                        
                        <p>评论内容</p>
                        
                        <div>
                            <span style="color: #ccc;">{{ dayjs().format('YYYY-MM-DD HH:mm')}} </span>
                            <span style="margin-left: 20px;color: #ccc;">回复</span>
                        </div>
                    </div>
                </div>    
            </div>
        </template>
        </div>
        <div class="commet-publish">
            <div>
                <van-field style="width: 75vw; height:40px" class="seeking-input" height="20px" placeholder="说点什么..." background="red" />
            </div>
            <!-- <div @click="toDetail"><van-icon name="comment-o" size="25"/><span>0</span></div> -->
             <van-button
          round
          type="primary"
          class="send-btn"
          @click="handleSend"
        >
          发送
        </van-button>
        
   
     
    

  </div>
</template>

<script setup name="TopicDetail">
import { onMounted, ref,computed  } from 'vue'
import { showTopicDetail ,getSeekCommentById , getSeekName} from '../api';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import dayjs from 'dayjs';

const route = useRoute()
const router = useRouter()



// 格式化创建时间（示例：计算距离现在多久）
const formatCreateTime = computed(() => {
  // 简单示例，实际可使用 dayjs 等库做更精细的时间格式化
  const createTime = new Date(topicDetail.value.topicCreateTime)
  const now = new Date()
  const diffHours = Math.floor((now - createTime) / (1000 * 60 * 60))
  return diffHours + '小时'
})
// 评论发送逻辑（示例，实际需对接接口）
const handleSend = () => {

}


const topicDetail = ref({
    topicId: null,
    topicType: '',
    topicAutorId: '',
    topicTitle: '',
    topicCreateTime: '',
    topicEditId: null,
    topicEditTime: '',
    version: null,
    isDeleted: null,
    pageViews: null,
    topicImageUrl: null,
    topicContent: null

})
onMounted(()=>{
  getTopicDetail()
  // getComment()
  
})
//获取新闻详情
const getTopicDetail = async ()=>{
  if(route.query.topicId){
    //console.log(route.query.topicId);
    let ret = await showTopicDetail(route.query.topicId)
    //console.log("111",ret);
    
    topicDetail.value = ret
    topicDetail.value=JSON.parse(JSON.stringify(topicDetail.value))
    
console.log(topicDetail.value);
  }
  //console.log(JSON.parse(JSON.stringify(topicDetail.value))) 
};

const onClickLeft = () => {
  // 返回逻辑
  router.push({
    name: 'lineTogic'
  })
};

const onClickRight = () => {
  // 分享逻辑
  console.log('点击了分享');
};

const seekComment = ref([1])


const getComment = async ()=>{
    const comments = await getSeekCommentById(route.query.seekTableId)
    if(comments !== ''){
        for (const item of comments) {
            let obj = {}
            obj.userName = await getSeekName(item.userId)
            obj.seekCommentId = item.seekCommentId
            obj.commentContent = item.commentContent
            obj.commentTime = item.commentTime
            obj.replyContent = item.replyContent
            obj.commentTime = item.commentTime
            obj.replyTime = item.replyTime
            seekComment.value.push(obj)
        }
    }
}


</script>

<style lang='less' scoped>

/* 页面整体容器 */
.topic-container {
  background-color: #fff;
  min-height: 100vh;
  padding: 8px;
  
  box-sizing: border-box;
}

/* 元信息（作者、浏览量等） */
.meta-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 14px;
  color: #1c0303;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;

  .author {
    color: #666;
    font-weight: 500;
    text-align: left;
  }
}
 .seeking-card {
        
        width: 100%;
        // height: 10vh;
        
        

        .seeking-card-header{
            display: flex;
            justify-content: flex-start;
            height: 3rem;
            margin: 10px;

            .header-content{
                display: flex;
                flex-direction: column;
                margin-left: 1rem;

                div:first-child{
                    text-align: left;
                    font-size: 1rem;
                    color: black;
                }
            }
        }
        .seeking-text{
            font-size: 22px;
            text-align: left;
            padding: 10px 0;
            color: black;
            
        }
        .seeking-img{
            img{
                width: 100%;
            }
        }
        .seeking-address{
            margin-top: 10px;
            text-align: left;
        }
        
    }
    .commet-container{
        .header{
            margin: 20px;
            font-size: 20px;
            font-weight: bold;
            span:last-child{
                font-size: 16px;
                color: #ccc;
            }
        }
       
        .comment{
            display: flex;
            justify-content: flex-start;
            // height: 3rem;
            margin: 20px;

            .comment-content{
                display: flex;
                width: 80vw;
                flex-direction: column;
                margin-left: 1rem;
                p{
                    margin: 10px 0px;
                }
                div:first-child{
                    text-align: left;
                    font-size: 1rem;
                    color: black;
                }
            }
        }
    }
    .commet-publish{

        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        position: sticky;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 5px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);

        
        .seeking-input{
            display: flex;
            align-items: baseline;
            background-color: #F7F8FA;
            border-radius: 10px;
        }
    }
    .noComment{
        width: 100%;
        font-size: 20px;
        font-weight: bold;
        padding: 20px;
        box-sizing: border-box;
        img{
            margin-top: 20px;
            width: 100%;
        }
    }

/* 分享图标样式（可根据需求调整） */
.share-icon {
  color: #333;
}

  
</style>